<template>
  <div class="login_coniter">
         <div class="aerave">
         <div class="photo_box">
       <img src="../assets/logo.png" alt="logo">
      </div>
      <el-form :model="LoginModel"  label-width="0px" class="bd" :rules="LoginFormeRules" ref="LoginFromRef">
  <el-form-item prop="username" >
    <el-input v-model="LoginModel.username" prefix-icon="el-icon-s-custom
"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="LoginModel.password"  prefix-icon="el-icon-unlock" type="password" ></el-input>
  </el-form-item>
  <el-form-item class="anniu" >
     <el-button type="success" @click="login">登录</el-button>
      <el-button type="info" @click="resetLoginFrom">重置</el-button>
  </el-form-item>
     </el-form>
      </div>
      <!-- //表单 -->
       </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      LoginModel: {
        username: 'xiaopang',
        password: '123456'
      },
      LoginFormeRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '要求2-10位数字或字母', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 11, message: '密码要求5-11位数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetLoginFrom () {
      this.$refs.LoginFromRef.resetFields()
    },
    login () {
      this.$refs.LoginFromRef.validate(async valid => {
        if (!valid) return
        try {
          const { data: res } = await this.$http.post('login', this.LoginModel)
          if (res.meta.status === 200) { this.$message.success('登录成功') }
          window.sessionStorage.setItem('token', res.data.token)
          this.$router.push('/home')
        } catch (error) {
          // console.log('登录失败:', error)
          this.$message.error('登录失败')
        }
      })
    }
  }
}

</script>

<style>
   .login_coniter {
    height: 100%;
    background-color: #2b4b6b;
   }

.aerave {
  width: 500px;
  height: 350px;
  position: absolute;
  left: 45%;
  transform: translate(-50%,80%);
  background-color: white;
  /* padding: 10px; */
}
.photo_box {
  width: 130px;
  height: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  background-color:  white;
  position: absolute;
  left: 33%;
  top: -15%;
  padding: 10px;
  /* box-shadow: ; */
}
  .photo_box  img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #eee;
  /* padding: 10px; */
}
.anniu {
  display: flex;
  justify-content: flex-end;
}
.bd {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>
